<template>
    <div style="width: 100%; height: 100%;">
        <div class="register">
            <h2 style="margin-bottom: 20px;">完善门店信息</h2>
            <Form ref="form" :model="form" :rules="formRules" label-position="top">
                <FormItem label="企业类型" prop="license_type">
                    <RadioGroup v-model="form.license_type">
                        <Radio :label="1">个体</Radio>
                        <Radio :label="2">企业</Radio>
                    </RadioGroup>
                </FormItem>
                <FormItem label="企业名称" prop="name">
                    <Input v-model="form.name" placeholder="请输入企业名称" style="width: 280px;" />
                </FormItem>
                <Row :gutter="20">
                    <Col :span="10">
                        <FormItem label="联系人" prop="cust_linkname">
                            <Input v-model="form.cust_linkname" placeholder="请输入联系人" style="width: 280px;" />
                        </FormItem>
                    </Col>
                    <Col :span="10">
                        <FormItem label="手机号" prop="cust_phone">
                            <Input v-model="form.cust_phone" placeholder="请输入联系人手机号" style="width: 280px;" />
                        </FormItem>
                    </Col>
                    <Col :span="10">
                        <FormItem label="法人姓名" prop="cust_represent">
                            <Input v-model="form.cust_represent" placeholder="请输入法人姓名" style="width: 280px;" />
                        </FormItem>
                    </Col>
                    <Col :span="10">
                        <FormItem label="身份证号码" prop="id_card">
                            <Input v-model="form.id_card" placeholder="请输入法人身份证号码" style="width: 280px;" />
                        </FormItem>
                    </Col>
                    <Col :span="10">
                        <FormItem label="身份证人像面" prop="id_card_positive">
                            <ImageUpload v-model="form.id_card_positive" :width="172" :height="108"></ImageUpload>
                        </FormItem>
                    </Col>
                    <Col :span="10">
                        <FormItem label="身份证国徽面" prop="id_card_reverse">
                            <ImageUpload v-model="form.id_card_reverse" :width="172" :height="108"></ImageUpload>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem label="社会信用代码" prop="cust_license">
                    <Input v-model="form.cust_license" placeholder="请输入社会信用代码" style="width: 280px;" />
                </FormItem>
                <FormItem label="营业执照" prop="business_license">
                    <ImageUpload v-model="form.business_license" :width="120"></ImageUpload>
                </FormItem>
                <Row :gutter="20">
                    <Col :span="10">
                        <FormItem label="食品流通许可证" prop="goods_license">
                            <ImageUpload v-model="form.goods_license" :width="120"></ImageUpload>
                        </FormItem>
                    </Col>
                    <Col :span="10">
                        <FormItem label="店铺门头照" prop="img">
                            <ImageUpload v-model="form.img" :width="120"></ImageUpload>
                        </FormItem>
                    </Col>
                </Row>
                <FormItem label="所在地区" prop="district_id">
                    <AreaCascader v-model="form.district_id" style="width: 280px;" />
                </FormItem>
                <FormItem label="详细地址" prop="address">
                    <BMap ref="bmap" @on-change="handleChangeMap"></BMap>
                </FormItem>
                <Button type="primary" :loading="submiting" @click="handleSubmit">立即注册</Button>
            </Form>
        </div>
    </div>
</template>

<script>
import BMap from '@/components/b-map.vue';
import ImageUpload from '@/components/ImageUpload.vue';
import AreaCascader from "@/components/AreaCascader.vue";
export default {
    components: {
        BMap,
        ImageUpload,
        AreaCascader
    },
    data() {
        return {
            submiting: false,
            form: {
                license_type: 1,
                name: '',
                cust_linkname: '',
                cust_phone: '',
                cust_represent: '',
                id_card: '',
                id_card_positive: '',
                id_card_reverse: '',
                cust_license: '',
                business_license: '',
                goods_license: '',
                district_id: [],
                address: '',
                longitude: '',
                latitude: '',
                img: ''
            },
            formRules: {
                name: [
                    {required: true, message: '企业名称不能为空', trigger: 'blur'}
                ],
                cust_linkname: [
                    {required: true, message: '联系人不能为空', trigger: 'blur'}
                ],
                cust_phone: [
                    {required: true, message: '联系人手机号不能为空', trigger: 'blur'},
                    {
                        validator(rule, value, callback, source, options) {
                            let reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                            if(!reg.test(value)) {
                                callback('手机号码格式有误');
                            }
                            return [];
                        },
                    }
                ],
                cust_represent: [
                    {required: true, message: '法人姓名不能为空', trigger: 'blur'}
                ],
                id_card: [
                    {required: true, message: '身份证号码不能为空', trigger: 'blur'},
                    {
                        validator(rule, value, callback, source, options) {
                            const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                            if(!reg.test(value)) {
                                callback('请输入有效的身份证号码');
                            }
                            return [];
                        }
                    }
                ],
                id_card_positive: [
                    {required: true, message: '请上传身份证人像照', trigger: 'change'}
                ],
                id_card_reverse: [
                    {required: true, message: '请上传身份证国徽照', trigger: 'change'}
                ],
                cust_license: [
                    {required: true, message: '社会信用代码不能为空', trigger: 'blur'}
                ],
                business_license: [
                    {required: true, message: '请上传营业执照', trigger: 'change'}
                ],
                goods_license: [
                    {required: true, message: '请上传食品流通许可证', trigger: 'change'}
                ],
                img: [
                    {required: true, message: '请上传店铺门头照', trigger: 'change'}
                ],
                district_id: [
                    {required: true, type: 'array', message: '请选择所在地区', trigger: 'change'}
                ],
                address: [
                    {required: true, message: '请输入详细地址', trigger: 'blur'}
                ]
            }
        }
    },
    mounted() {
        this.$nextTick(() => {
            // 初始定位
            this.$refs.bmap.setLocation();
        })
    },
    methods: {
        handleChangeMap(addr) {
            this.form.latitude = addr.lat;
            this.form.longitude = addr.lng;
            this.form.address = addr.address;
        },
        handleSubmit() {
            const { form, submiting } = this;
            if(submiting) return false;
            this.$refs.form.validate((valid) => {
                if(valid) {
                    const params = {
                        license_type: form.license_type,
                        name: form.name,
                        cust_linkname: form.cust_linkname,
                        cust_phone: form.cust_phone,
                        cust_represent: form.cust_represent,
                        id_card: form.id_card,
                        id_card_positive: form.id_card_positive,
                        id_card_reverse: form.id_card_reverse,
                        cust_license: form.cust_license,
                        business_license: form.business_license,
                        goods_license: form.goods_license,
                        district_id: form.district_id[form.district_id.length - 1],
                        address: form.address,
                        longitude: form.longitude,
                        latitude: form.latitude,
                        img: form.img
                    }
                    this.submiting = true;
                    this.$ajax.post('/custom.custom/create', params).then(res => {
                        this.$Message.success('注册成功，即将跳转首页');
                        this.$store.commit('setCustomInfo', res);
                        setTimeout(() => {
                            this.$router.push({name: 'home_index'});
                        }, 1500)
                    }).catch(err => {
                        this.submiting = false;
                        this.$Message.error(err.message || '注册失败');
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
.register {
    margin: 0 auto;
    padding: 20px;
    width: 1000px;
    background-color: #fff;
}
</style>